import React, { useRef, useState, useEffect } from 'react';
import { Space, Card, Row, Col ,Statistic} from 'antd';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { StatisticCard } from '@ant-design/pro-card';

import { tongjiOrder, tongjiOrderHz } from './service'
import type { analysisDataParams,oilListParams } from './data';

const TableList: React.FC = () => {

  const [selectedRows, setSelectedRows] = useState<oilListParams[]>([]);
  const actionRef = useRef<ActionType>();
  const [analysisData, setAnalysisData] = useState<analysisDataParams>();

  useEffect(() => {
    const fetch = async () => {
      await tongjiOrderHz({}).then((res)=>{res.code === 200 && setAnalysisData(res.data.hz)})
    }
    fetch();
  }, [])
  
  const oilListColumns: ProColumns<oilListParams>[] = [
    {
      title: '名称',
      search: false,
      dataIndex: 'show_name',
    },
    {
      title: '统计类型',
      dataIndex: 'tongji_type',
      initialValue: 1,
      hideInTable: true,
      valueType: 'select',
      request: async () => [
        {
          label: '按品类统计',
          value: 1,
        },
        {
          label: '按客户统计',
          value: 2,
        },
        {
          label: '按供应商统计',
          value: 3,
        },
        {
          label: '按货品统计',
          value: 4,
        },
      ],
    },
    {
      title: '客户名称',
      hideInTable: true,
      dataIndex: 'company_name',
    },
    {
      title: '日期',
      dataIndex: 'searchDate',
      hideInTable: true,
      valueType: 'dateRange',
      search: {
        transform: (value: any) => ({ bdate: value[0], edate: value[1] }),
      },
    },
    {
      title: '利润',
      dataIndex: 'money',
      search: false,
      align: 'right',
      render: (_, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{ color: rowData.out_price_all > rowData.in_price_all ? '#52c41a' : '#f00',fontSize:'16px',fontWeight:500}}
            value={rowData.money}
          />
        )
      },
      sorter: (a, b) => a.money - b.money,
    },
    {
      title: '入库总值',
      align: 'right',
      dataIndex: 'in_price_all',
      search: false,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{fontSize:'14px'}}
            value={rowData.in_price_all}
          />
        )
      },
      sorter: (a, b) => a.in_price_all - b.in_price_all,
    },
    {
      title: '出库数量',
      align: 'right',
      dataIndex: 'out_stock',
      search: false,
      sorter: (a, b) => a.out_stock - b.out_stock,
    },
    
    {
      title: '出库平均单价',
      align: 'right',
      dataIndex: 'out_price',
      search: false,
      sorter: (a, b) => a.out_price - b.out_price,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{fontSize:'14px'}}
            value={rowData.out_price}
          />
        )
      },
    },
    {
      title: '出库总价值',
      align: 'right',
      dataIndex: 'out_price_all',
      search: false,
      render: (dom, rowData) => {
        return (
          <Statistic
            precision={3}
            valueStyle={{fontSize:'14px'}}
            value={rowData.out_price_all}
          />
        )
      },
      sorter: (a, b) => a.out_price_all - b.out_price_all,
    },
  ]

  return (
    <PageContainer>
      <Card bordered={false} style={{ marginBottom: '15px' }}>
        <Card.Grid hoverable={false} style={{ width: '30%', padding: '10px' }} >
          <StatisticCard
            statistic={{
              title: '总量利润',
              precision: 3,
              value: analysisData?.money,
              valueStyle: analysisData?.out_price_all && analysisData?.in_price_all ? { fontWeight: 700,color: analysisData.out_price_all > analysisData.in_price_all ? '#52c41a' : '#f00' } : {},
              // prefix: '¥',
            }}
          />
        </Card.Grid>
        <Card.Grid hoverable={false} style={{ width: '30%', padding: '10px' }} >
          <Row>
            <Col span={10}>
              <StatisticCard
                statistic={{
                  status: 'success',
                  title: '入库总值',
                  precision: 3,
                  valueStyle: {fontWeight: 700},
                  value: analysisData?.in_price_all,
                }}
              />
            </Col>
          </Row>
        </Card.Grid>
        <Card.Grid hoverable={false} style={{ width: '40%', padding: '10px' }} >
          <Row>
            <Col span={8}>
              <StatisticCard
                statistic={{
                  status: 'error',
                  title: '出库总量',
                  valueStyle: {fontWeight: 700},
                  value: analysisData?.out_stock,
                }}
              />
            </Col>
            <Col span={8}>
              <StatisticCard
                statistic={{
                  status: 'error',
                  title: '出库总值',
                  precision: 3,
                  valueStyle: {fontWeight: 700},
                  value: analysisData?.out_price_all,
                }}
              />
            </Col>
          </Row>
        </Card.Grid>
      </Card>
      <ProTable
        headerTitle="销售统计列表"
        actionRef={actionRef}
        rowKey="show_name"
        bordered={true}
        columns={oilListColumns}
        search={{
          span: 5,
          labelWidth: 'auto',
          resetText: '重置查询',
          searchText: '查询统计',
        }}
        pagination={{
          pageSize: 10,
          current: 1
        }}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
        request={async (params) => {
          const dataParams = {
            page: params.current,
            limit: params.pageSize,
            oil_name: params.product_name,
            company_name: params.company_name,
            tongji_type: params.tongji_type,
            bdate: params.bdate,
            edate: params.edate,
          }
          const res = await tongjiOrder({ ...dataParams });

          return {
            data: res.data.list,
            success: res.code === 200,
            total: res.data.total,
          };
        }}
      />

      {selectedRows.length > 0 && (
        <FooterToolbar
          extra={
            <Space size="large">
              <div>已选择&nbsp;&nbsp;<a style={{ fontWeight: 600, }}>{selectedRows?.length}</a>&nbsp;&nbsp;项</div>
              <Space>
                利润合计:
                <Statistic
                  precision={3}
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows.reduce((pre, item) => pre + Number(item.money)!, 0)}
                />
              </Space>
              <Space>
                入库总值:
                <Statistic
                  precision={3}
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows.reduce((pre, item) => pre + Number(item.in_price_all)!, 0)}
                />
              </Space>
              <Space>
                出库总值:
                <Statistic
                  precision={3}
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows.reduce((pre, item) => pre + Number(item.out_price_all)!, 0)}
                />
              </Space>
              <Space>
                出库总量:
                <Statistic
                  valueStyle={{fontSize:'14px',fontWeight: 600,color:'#1890ff'}}
                  value={selectedRows.reduce((pre, item) => pre + Number(item.out_stock)!, 0)}
                />
              </Space>
            </Space>
          }
        >
        </FooterToolbar>
      )}
    </PageContainer>
  );
};

export default TableList;